<template>
    <div class="plBox"> 
        <div class="top">
            <span class="left">商品评价（190）</span>
            <span class="right">好评94.7%></span>
        </div>
        <div class="center">
            <span>商品很好(6)</span>
            <span>物流快(3)</span>
            <span>包装漂亮(2)</span>
        </div>
        <div class="bootom">
            <Swiper :modules="modules" :autoplay="{ delay: 2000 }" :slides-per-view="1" :space-between="50" loop
                @swiper="onSwiper" @slide-change="onSlideChange"
                 :slides-per-group="2"
                >
                <Swiper-slide v-for="item in arrCon.slice(0, 3)">
                <div class="small">
                    <div class="smallLeft">
                        <img src="https://kaola-haitao.oss.kaolacdn.com/555d249a-fcb2-49be-b3aa-c59a3789c1fa_150_150.png"
                            alt=""></img><span>手**9</span>
                        <p>气垫外观非常好看，打开里面的粉质非常细腻，以后会回购</p>
                    </div>
                    <div class="smallRight">
                        <img :src="arrCon" alt="">
                    </div>
                </div>
                </Swiper-slide>
            </Swiper>
        </div>
        <div class="bxxxx">
            <!-- <img src="https://kaola-pop.oss.kaolacdn.com/7117c06a-ebe8-447c-8572-ae11e864c184?x-oss-process=image/resize,w_100,h_100/quality,q_85" alt=""> -->
            <div class="bxxxx_zhong">
                <!-- <div>JACOMART海外旗舰店</div>
                <div class="bxxxx_img"></div> -->
                
            </div>
            <div class="ziti" style="color: red;">进店看看<span>></span></div>
        </div>  
    </div>
</template>
<script setup lang='ts'>
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import axios from 'axios';
import { Swiper, SwiperSlide, useSwiper } from "Swiper/vue";
import { Autoplay } from "swiper/modules";
import 'swiper/css'
let modules = [Autoplay];
function onSwiper() {
    // console.log(onSwiper);
}
function onSlideChange() {
    // console.log(onSlideChange);
}
let Route = useRoute()
let arrCon = ref([])
let img = "https://apis.netstart.cn/xmsc/communicate/mizone_product_comment_detail?comment_id=210597765"
axios.get(img).then((res) => {
    arrCon.value = res.data.data.pic_list[0].img
    // console.log(res.data.data.pic_list[0].img)
})
</script>
<style scoped>
.plBox {
    font-size: 0.12rem;
    width: 3.5rem;
    height: 2rem;
    margin: 0 auto;
    margin-top: 0.12rem;
    border-radius: 0.1rem;
    background-color: #fff;
}
.bxxx{
    width: 3.5rem;
    height: 0.12rem;
}
.top {
    display: flex;
    justify-content: space-between;
}

.left {
    font-size: 0.16rem;
    font-weight: bold;
    margin-left: 0.1rem;
}

.right {
    font-size: 0.14rem;
    color: #ff0000;
    margin-right: 0.1rem;
    ;
}

.center {
    display: flex;
    justify-content: left;
    margin-top: 0.1rem;
    margin-left: 0.2rem;
}

.center span {
    width: 0.75rem;
    height: 0.21rem;
    background-color: #f4dddd;
    border-radius: 0.12rem;
    /* 左上内边距 */
    padding-left: 0.08rem;
    padding-top: 0.02rem;
    margin-right: 0.1rem;
}

.bootom img {
    width: 0.84rem;
    height: 0.84rem;
}

.bootom {
    display: flex;
}

.smallLeft img {
    width: 0.16rem;
    height: 0.16rem;
}

.small {
    color: #333;
    margin-left: 0.2rem;
    margin-top: 0.2rem;;
    display: flex;

}

.smallLeft {
    width: 1.28rem;
    height: 0.8rem;
    font-size: 0.1rem;
    background-color: #fdf3f363;
    padding: 0.08rem;
}

.smallLeft p {
    margin-top: 0.06rem;
}
.bxxxx{
    display:flex ;
    margin: 0.2rem 2.66667vw;
    justify-content: space-between;
}
.bxxxx img{
    width: 0.5rem;
    height: 0.5rem;
}
.bxxxx_zhong{
    margin-left:-0.8rem ;
    font-size: 0.12rem;
    font-weight: bold;
}
.bxxxx_img img{
    width: 0.1rem;
    height: 0.1rem;
}
</style>